<template>
    <div class="echarts" ref="echartRef"></div>
</template>

<script lang="ts" setup>
import { defineComponent, nextTick, onBeforeUpdate, onMounted, ref, shallowRef, watch } from 'vue'
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { EChartsOption } from 'echarts'
import { useEventListener } from '@vueuse/core'

const props = defineProps<{
    dataSource?: any
    echartsOption: EChartsOption
}>()

const echartRef = ref<HTMLElement>()

let curChart: echarts.ECharts
// 用于接收业务配置
const option = ref<EChartsOption>()

onMounted(() => {
    // 合并通用配置及外部传递的配置（共有属性以外部传递的为准）
    // this.$.extend(this.option, this.echartsOption)
    curChart = echarts.init(echartRef.value!)
    if (props.echartsOption) {


      curChart.setOption(props.echartsOption)
      // 改变页面大小时，重绘图表
      useEventListener('resize', function () {
        curChart.resize()
      })
    }
    // 改变页面大小时，重绘图表
    useEventListener('resize', function () {
      curChart&&curChart.resize()
    })

    console.log('curChart======>',curChart);
})
watch(
    () => props.echartsOption,
    (val) => {
      if (val) {
        console.log(val, 'val')
        option.value = val
        nextTick(()=>{

          console.log('echartsOption val',val);
          curChart.setOption(option.value!)
        })
      }

    },{
        deep:true
    }
)

onBeforeUpdate(()=>{
    console.log('beforeUpdate');
    if (props.echartsOption) {
      curChart.setOption(props.echartsOption!)
    }

})
</script>

<style scoped>
.echarts {
    width: 100%;
    height: 100%;
}
</style>
